<template>
  <el-scrollbar height="600px">
    <el-form ref="masterFormRef" label-width="140px">
      <el-row class="model-row">
        <el-col class="model-col" :span="8" v-for="prop in modelInfo.propList">
          <el-form-item class="model-item" v-if="prop.dataType === dataType.STR.val" :label="prop.name" :prop="prop.code">
            <el-input
                v-model="prop.value"
                :maxlength="prop.ext.maxLen || 100"
            />
          </el-form-item>
          <el-form-item class="model-item" v-if="prop.dataType === dataType.NUM.val" :label="prop.name" :prop="prop.code">
            <el-input-number
                v-model="prop.value"
                :min="prop.ext.minNum || -999999999"
                :max="prop.ext.maxNum || 999999999"
                controls-position="right"
            />
          </el-form-item>
          <el-form-item class="model-item" v-if="prop.dataType === dataType.DATE.val" :label="prop.name" :prop="prop.code">
            <el-date-picker
                v-model="prop.value"
                type="date"
            />
          </el-form-item>
          <el-form-item class="model-item" v-if="prop.dataType === dataType.FILE.val" :label="prop.name" :prop="prop.code">
            <el-input v-model="prop.value" :maxlength="prop.ext.maxLen || 100" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-scrollbar>
</template>

<script>
import { defineComponent, getCurrentInstance, reactive, toRefs } from 'vue';
import { ModeTypeEnum } from '@/store/enums/ModeTypeEnum';
import { PageTypeEnum } from '@/store/enums/PageTypeEnum';
import { SwitchEnum } from '@/store/enums/SwitchEnum';
import PropEnum from '@/store/enums/PropEnum';
import modelApi from '@/api/module/model';

const { dataType } = PropEnum;

export default defineComponent({
  name: 'PreviewForm',
  props: ['pageType', 'areaCode', 'modelCode'],
  setup(props) {
    const { proxy } = getCurrentInstance();
    const { pageType, modelCode } = toRefs(props);
    const { sys_user_vip, sys_def_type } = proxy.useDict('sys_user_vip', 'sys_def_type');
    const vueData = reactive({
      entityFormTitle: '',
      entityFormOpen: false,
      entityForm: {},
      modelInfo: {},
    });

    function load() {
      modelApi.getFullInfo(modelCode.value).then(res => {
        vueData.modelInfo = res.data;
      });
    }

    return {
      dataType,
      pageType,
      PageTypeEnum,
      SwitchEnum,
      ModeTypeEnum,
      sys_user_vip,
      sys_def_type,
      ...toRefs(vueData),
      load,
    }
  },
});
</script>

<style lang='scss' scoped>

</style>